<template>
  <div class="books">
    <div class="info">
      <TodoHead @add="chengeInfo"></TodoHead>
      <TodoMain :arrInfo="arrInfo" @del="del"></TodoMain>
      <TodoFooter @scl="scl" :arrInfo="arrInfo"></TodoFooter>
    </div>
  </div>
</template>

<script setup lang="ts">
import TodoHead from "./components/TodoHead.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
import { ref, watch } from "vue";
// let info = ref();
const arrInfo = ref(
  JSON.parse(localStorage.getItem("key") as string) || [
    { id: 1, renwu: "跑步锻炼1小时" },
    { id: 2, renwu: "跳绳锻炼3小时" },
  ]
);

const chengeInfo = (info: { value: any }) => {
  arrInfo.value.push({ id: +new Date(), renwu: info.value });
};

const del = (id: number) => {
  arrInfo.value = arrInfo.value.filter(
    (item: { id: number }) => item.id !== id
  );
};

const scl = () => {
  arrInfo.value = [];
};

watch(
  () => arrInfo.value,
  (newVal) => {
    localStorage.setItem("key", JSON.stringify(newVal));
  },
  { deep: true }
);
</script>

<style lang="scss" scoped></style>
